Feat/code viewer line numbers - #222
Conversation
Fixes komalharshita#95 - static/script.js: added renderCodeWithLineNumbers() to split code into line rows with separate number and content spans; updated fetchStarterCode() to render numbered lines; fixed copy button to extract only line content, excluding line numbers - static/style.css: updated .code-viewer to remove white-space:pre; added .code-line, .line-number, and .line-content styles for layout and appearance - templates/project.html: added display:block to <code> element so flex line rows render correctly
|
@Pranav-IIITM is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Hi @komalharshita , could you please review this PR when you have some time? This PR adds line numbers to the inline code viewer on the project detail page to improve readability and navigation for contributors. The implementation now renders starter code line-by-line with a dedicated line number column, similar to GitHub/VS Code style viewers. I’ve updated the JS rendering logic, added the required styling, and modified the template structure accordingly. Looking forward to your feedback. Thanks! |
komalharshita
left a comment
komalharshita
left a comment
There was a problem hiding this comment.
Good enhancement overall. Adding line numbers to the code viewer meaningfully improves readability and makes code references easier for users reviewing starter templates and examples.
The feature appears well-scoped and adds practical UX value without introducing unnecessary modifications. This is especially useful in an educational/project-learning environment like DevPath.
Minor future consideration: verify responsive behavior and ensure line numbers stay properly aligned for larger or wrapped code blocks.
Approved for merge.
komalharshita
added
type:design
level:intermediate
quality:clean
gssoc:approved
and removed
type:accessibility
labels
2 participants
📝 Pull Request
Summary [required]
This PR enhances the inline code viewer on the project detail page by adding line numbers to the starter code panel. Previously, large starter files were rendered as plain
<pre><code>blocks, making navigation difficult for contributors and learners referencing specific lines. The updated implementation improves readability and usability by rendering each line with a dedicated line number column, similar to professional code viewers like GitHub and VS Code.Related Issue [required]
Closes #95
Type of Change [required]
data/projects.jsonWhat Was Changed [required]
static/script.jsstatic/style.css.line-number,.code-line, and.line-contentfor improved readability and alignmenttemplates/project.html